@import 'assets/stylesheets/gutenberg-base-styles';
@import '../../mixins';
@import '../colors';

$progress-duration: 800ms;

.create-site {
	padding: 1em;
	max-width: 540px;

	margin: 32vh auto;

	.create-site__progress-bar {
		position: relative;
		overflow: hidden;
		height: 6px;
		margin-top: 1em;
		background: var( --studio-gray-10 );
		--progress: 0;

		&::before {
			background: var( --studio-blue-40 );
			transform: translateX( calc( -100% * min( 1 - var( --progress, 0 ), 1 ) ) );
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			transition: transform $progress-duration ease-out;
		}
	}

	.create-site__progress-step {
		@include onboarding-heading-text-mobile;

		text-align: center;
		vertical-align: middle;
		margin: 0;
	}

	.create-site__progress-numbered-steps {
		margin-top: 0.7em;
		padding: 1em;
		text-align: center;
		color: var( --studio-gray-40 );
	}
}
